<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2986739_pe1a3y2l85c.css">
    <link rel="stylesheet" href="../css/cart.css">
<<<<<<< HEAD
    <link rel="icon" href="../images/favicon.ico" type="images/x-icon">
=======
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
    <!-- <link rel="stylesheet" href="https://img.alicdn.com/imgextra/i4/2365329828/O1CN01JNSJDm2MTH1QQCJZk_!!2365329828.jpg"> -->
</head>

<body>
    <div class="allhead">
        <div class="head">
            <div class="head1">
                <span>你好，欢迎来到海澜之家！</span>
                <div class="head1son">
                    <a href="../html/login.html"><b>请登录</b></a>
                    <a href=""><b>合作账号登录</b>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-social-qq"></i>
                    </a>
                    <a href="../html/zhuce.html"><b>免费注册</b></a>
                </div>
                <div class="show">
                    <span class="show-phone">欢迎:</span>
                    <a href="" class="over">退出</a>
                </div>
            </div>
            <div class="head2">
                <div class="head2son">
                    <a href="" class="">我的海澜之家</a>
                    <a href="" class="">在线客服</a>
                    <a href="" class="cart-shop">我的购物袋</a>
                    <a href="" class="">帮助</a>
                </div>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="nav">
            <div class="wrapson">
                <a href=""><span>附近门店</span></a>
            </div>
            <div class="wrap1son">
                <a href=""><img src="../images/1.png" alt=""></a>
            </div>
            <div class="wrap2son">
                <input type="text" class="sousuo">
                <a href=""><i class="iconfont icon-sousuo"></i></a>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul>
            <a href="">
                <li>首页</li>
            </a>
            <a href="../html/list.html">
                <li>2021夏季热卖</li>
            </a>
            <a href="../html/list.html">
                <li>明星同款</li>
            </a>
            <a href="../html/list.html">
                <li>IP联名</li>
            </a>
            <a href="../html/list.html">
                <li>国民臻品</li>
            </a>
            <a href="../html/list.html">
                <li>2021秋季新品</li>
            </a>
        </ul>
    </div>
    <div class="main">
        <div class="cart">
            <p>购物车</p>
            <div class="cart-title">
                <span class="cart-check">
                    <input type="checkbox" class="checkAll">
                    全选
                </span>
                <span class="cart-info">商品信息</span>
                <span class="cart-price">单价</span>
                <span class="cart-num">数量</span>
                <span class="cart-total">金额</span>
                <span class="cart-delete">操作</span>
            </div>
            <div class="cart-box">
                <!-- <div class="middleshop">
                    <input type="checkbox" class="check-one">
                    <img src="../images/11.jpg" alt="">
                    <span class="goods_title">HLA海澜之家【周杰伦同款】温暖羊绒衫2021柔软轻盈保暖打底衫男</span>
                    <span class="goods_des">HNZRD4D021A</span>
                    <span class="goods_price">￥<span>78</span> </span>
                    <span class="count">
                        <span class="reduce off"></span>
                        <input type="text" name="" id="" value="1" class="count-input"/>
                        <span class="add">+</span>
                    </span>
                    <span class="cart-total">￥<span>78</span></span>
                    <span class="cart-delete">删除</span>
                </div>
                <div class="middleshop">
                    <input type="checkbox" class="check-one">
                    <img src="../images/11.jpg" alt="">
                    <span class="goods_title">HLA海澜之家【周杰伦同款】温暖羊绒衫2021柔软轻盈保暖打底衫男</span>
                    <span class="goods_des">HNZRD4D021A</span>
                    <span class="goods_price">￥<span>78</span></span>
                    <span class="count">
                        <span class="reduce off"></span>
                        <input type="text" name="" id="" value="1" class="count-input"/>
                        <span class="add">+</span>
                    </span>
                    <span class="cart-total">￥<span>78</span></span>
                    <span class="cart-delete">删除</span>
                </div> -->
<<<<<<< HEAD

=======
                
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
            </div>
            <div class="footshop">
                <span class="checkend">
                    <input type="checkbox" class="checkAll">
                    全选
                </span>
                <span class="deleteAll">删除</span>
                <span class="count-total">
                    已选商品
                    <span id="selectedTotal">0</span>
                    件
                </span>
                <span class="count-price">
                    合计:￥
                    <span id="priceTotal"></span>
                </span>
                <span class="end">结算</span>
            </div>
        </div>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/api.js"></script>
<script>
<<<<<<< HEAD

    const phone = localStorage.getItem('phone');
    console.log(phone);
    if (phone) {
        $('.head1son').css({ 'display': 'none' }).removeClass()
        $('.show').css({ 'display': 'block' })
        $('.show-phone').eq(0).html(`欢迎您:${phone}`)
    }

    $('.over').on('click', function () {
        localStorage.removeItem('phone')
        location.reload();
    })
    // const phone = localStorage.getItem('phone');
=======
    const phone = localStorage.getItem('phone');
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164

    if (phone) {
        async function getData() {
            const res = await cart({ phone });
            // console.log(res);
            const { status, msg, data } = res;
            if (status) {
                let html = '';
                data.forEach(v => {
                    html += `
                        <div class="middleshop" data-id = "${v.id}">
                            <input type="checkbox" class="check-one">
                            <img src="${v.img}" alt="">
                            <span class="goods_title">${v.title}</span>
                            <span class="goods_des">${v.des}</span>
                            <span class="goods_price">￥<span>${v.price}</span> </span>
                            <span class="count">
                                <span class="reduce off"></span>
                                <input type="text" name="" id="" value="${v.num}" class="count-input"/>
                                <span class="add">+</span>
                            </span>
                            <span class="cart-total">￥<span>${v.price * v.num}</span></span>
                            <span class="cart-delete">删除</span>
                        </div>
                    `
                })
                // console.log(html);
                $('.cart-box').html(html);
            } else {
                alert(msg)
            }
        }
        getData()
    }








    //全选
    $('.checkAll').on('click', function () {
        $('.check-one').prop('checked', $(this).prop('checked'))
        $('.checkAll').prop('checked', $(this).prop('checked'))
        cartTotal()
    })

    //反选

    $('.cart-box').on('click', '.check-one', function () {
        $('.check-one').each((i, v) => {
            console.log(v);
            if (!$(v).prop('checked')) {
                $('.checkAll').prop('checked', false)
                return false
            }
            $('.checkAll').prop('checked', true)
        })
        cartTotal()
    })

    //删除
    $('.cart-box').on('click', '.cart-delete', async function () {
        const id = $(this).parents('.middleshop').attr('data-id')
        console.log(id);
        const res = await odelete({
            phone,
            id
        })
        console.log(res);
        const { status, msg } = res;
        if (status) {
            $(this).parents('.middleshop').remove()
            $('.check-one').each((i, v) => {
                if (!$(v).prop('checked')) {
                    $('.checkAll').prop('checked', false);
                    return false
                }
                $('.checkAll').prop('checked', true);

            })
            cartTotal()
        } else {
            alert(msg)
        }
    })

    //批量删除
<<<<<<< HEAD
    $('.footshop').on('click', '', async function () {
=======
    $('.footshop').on('click', '' ,async function () {
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
        const id = $(this).parents('.middleshop').attr('data-id')
        const res = await odelete({
            phone,
            id
        })
        const { status, msg } = res;
<<<<<<< HEAD
        if (status) {
=======
        if(status) {
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
            $(this).parents('.middleshop').remove()
            $('.check-one').each((i, v) => {
                if ($(v).prop('checked')) {
                    $(v).parents('.middleshop').remove()
                }
            })
            cartTotal()
        } else {
            alert(msg)
        }
    })

    //数量+
<<<<<<< HEAD
    $('.cart-box').on('click', '.add', function () {
=======
    $('.cart-box').on('click', '.add' , function () {
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
        const num = $(this).prev().html();
        console.log(num);
        let c = $(this).prev().val()
        $(this).prev().val(++c);

        let price = $(this).parent().prev().children().html();
        console.log(price * c);
        $(this).parent().next().children().html(price * c);

        console.log($(this).prev().prev().hasClass('off'));
        if ($(this).prev().prev().hasClass('off')) {
            $(this).prev().prev().removeClass('off');
            $(this).prev().prev().html('-');
        }
        cartTotal()
    })

    //数量-
<<<<<<< HEAD
    $('.cart-box').on('click', '.reduce', function () {
=======
    $('.cart-box').on('click','.reduce', function () {
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164
        if ($(this).html()) {
            let c = $(this).next().val();
            $(this).next().val(--c);

            let price = $(this).parent().prev().children().html();
            $(this).parent().next().children().html(price * c);

            if (c <= 1) {
                $(this).html('');
                $(this).addClass('off');
            }
        }
        cartTotal()
    })

<<<<<<< HEAD
    $('.end').on('click', function () {
=======
    $('.end').on('click' , function () {
>>>>>>> c2a0b16d374b2dadbf60483b2ca7e378d937a164

    })



    function cartTotal() {
        let money = 0; count = 0;
        $('.check-one').each((i, v) => {
            if ($(v).prop('checked')) {
                money += $(v).parents('.middleshop').find('.cart-total').children().html() * 1;
                console.log(money);
                count += $(v).parents('.middleshop').find('.count-input').val() * 1;
            }
        })
        $('#priceTotal').html(money)
        $('#selectedTotal').html(count)
    }
</script>

</html>